<template>
  <div class="seckill-box">
    <div class="seckill-top">
      <div class="seckill-top-left">
        <span>海购秒杀</span>
        <span style="color: #fe505d; font-size: 0.875rem">8点场</span>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="seckill-top-right">
        <span style="color: #fe505d">爆款轮番秒</span>
        <!-- <span class=""></span> -->
      </div>
    </div>
      <van-grid :border="false" :column-num="6"  class="seckill-buttom">
        <van-grid-item v-for="item in goodslist" :key="item.proid" @click="goGoodsDetail(item.proid)" class="kill-box">
          <van-image :src="item.img1" class="kill-image"/>
          <p class="price">￥{{item.originprice}}</p>
        </van-grid-item>
      </van-grid>
  </div>
</template>

<script>
export default {
  name: "SecKill",
  data() {
    return {
      time: 3600000 * 30,
      goodslist:[],
      finished: false,
      loading: false,
    };
  },
  created() {
    this.service({
      url: "/pro/seckilllist",
      params: {
          count: this.pageIndex,
          limitNum: 5,
        },
    })
    .then((res)=>{
      if (res.data.code == 200) {
            // console.log("res.data.data.length",res.data.data.length);
            // console.log(res);
            this.goodslist = [...this.goodslist, ...res.data.data];
            // console.log(this.goodslist);
            // this.loading = false;
            // this.pageIndex++;
          }
    })
  },
  methods: {
    goGoodsDetail(id) {
      this.$router.push("/GoodsDetail/" + id);
    }
  }
};
</script>

<style scoped>
.seckill-box {
  width: 100%;
  height: 8.875rem;
  display: flex;
  flex-direction: column;
  /* background-color: orangered; */
}
.seckill-top {
  width: 100%;
  height: 2rem;
  display: flex;
  /* background-color: aqua; */
}
.seckill-top .seckill-top-left {
  width: 50%;
  height: 100%;
  display: flex;
  font-size: 0.75rem;
  justify-content: space-between;
  align-items: center;
  /* background-color: brown; */
}
.seckill-top .seckill-top-right {
  width: 50%;
  height: 100%;
  font-size: 0.875rem;
  display: flex;
  justify-content: end;
  align-items: center;
  /* background-color: pink; */
}
.seckill-buttom {
  /* flex: 1; */
  height: 6.75rem;
  display: flex;
  justify-content: space-between;
  /* background-color: yellow; */
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.kill-box{
  width: 20%;
}
.kill-image{
  width: 4.5rem;
  height: 4.5rem;
}
.block {
  display: inline-block;
  width: 20px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 0.625rem;
}
.price {
  color: #ee0a24;
}
</style>